<template>
  <div>
     <!-- position -->
    <div class="position">
      <Breadcrumb>
          <BreadcrumbItem to="/"><Icon type="ios-home-outline" />首页</BreadcrumbItem>
          <BreadcrumbItem to="/apointment">我的预约</BreadcrumbItem>
          <BreadcrumbItem>发起预约</BreadcrumbItem>
      </Breadcrumb>
    </div>
    <!-- content -->
    <div class="hd pd20">
      <!-- steps -->
      <appoint-steps :current="0"></appoint-steps>
      <!-- title -->
      <div class="title-1 mt20">
        <div class="inner">选择科室医生</div>
      </div>
      <!-- department list -->
      <div class="pd10">
        <section class="department-list mt20" v-for="k in 2">
          <div class="first">
            <a href="javascript:;">内科</a>
          </div>
          <ul class="others">
            <li v-for="i in 22">
              <a href="javascript:;">心内科</a>
            </li>
          </ul>
          <div class="line"></div>
        </section>
      </div>
      <!-- doctor list -->
      <div class="mt20">
        <doctor-item v-for="i in 3"></doctor-item>
      </div>
    </div>
  </div>
</template>

<script>
import AppointSteps from '@/components/AppointSteps'
import DoctorItem from '@/components/DoctorItem'
export default {
  components: {DoctorItem, AppointSteps},
  data () {
    return {
      current: 0
    }
  }
}
</script>

<style lang="less" scoped>
.department-list {
  display: flex;
  position: relative;
  .first {
    font-size: 18px;
    margin-right: 20px;
    flex:0 0 80px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .others {
    display: flex;
    flex-wrap: wrap;
    padding-left: 30px;
    border-left: 1px solid #ddd;
    a {
      color:#333;
    }
    li {
      margin: 6px 20px 6px 0;
      font-size: 14px;
    }
  }
}
</style>
